<template>
  <div class="hello">
    <button @click="push_data">adf</button> <br><br>
    <iframe
            id="mapIframe"
            style="width: 120px; height: 300px"
            src="http://127.0.0.1:8080/#/MapClassification"
            frameborder="0"
    ></iframe>
  </div>
</template>

<script>
  export default {
    name: 'MapVueComm',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      push_data(){
        console.log(document.getElementById('mapIframe'))
        var con =  document.getElementById('mapIframe').contentWindow

        //热力图
        var json = {
          "cmd":"100001",
          "data":{
            data: [
              { lat: 39.09596, lng: 116.03759, count: 111 },
              { lat: 39.91314, lng: 116.37190,  count: 1 },
              { lat: 39.91314, lng: 116.31190,  count: 9 },
              { lat: 39.91314, lng: 116.35190,  count: 8 },
              { lat: 39.91314, lng: 116.38190,  count: 7 },
            ]
          }
        }
        //marker
        var json = {
          "cmd":"100002",
          "data":[
            {
              id: 'm1',
              position: { lat: 39.92, lng: 116.46 },
              tooltip: '你好',
              draggable: true,
              visible: true,
              icon:{
                iconUrl: "https://lbsyun.baidu.com/jsdemo/img/car.png",
                iconSize: [20, 20],
              }
            },
            {
              id: 'm2',
              position: { lat: 33.92, lng:  110.46 },
              tooltip: '你好2',
              draggable: true,
              visible: true,
              icon:{
                iconUrl: "https://lbsyun.baidu.com/jsdemo/img/car.png",
                iconSize: [20, 20],
              }
            }
          ]
        }
        con.postMessage(json,'*');
        //地图平移到点设置
        var json = {
          "cmd":"100003",
          "data":{'lon':110.46,'lat':33.92}
        }
        //切换主题
        var json = {
          "cmd":"100004",
          "data":"blue"
        }
        con.postMessage(json,'*');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>
